<template>
	<view class="">
		<u-navbar title="立即预约" :autoBack="true" :placeholder="true">
		</u-navbar>
		<view class="formbox">
			<u--form :model="form" ref="uForm" :errorType="['toast']" labelWidth="80">
				<u-form-item label="预约门店" prop="storeName" borderBottom
					@click="$u.route('/pages/member/merchant/storeList/storeList');">
					<u-input border="none" v-model="form.storeName" placeholder="请选择预约门店" disabledColor="#fff"
						disabled />
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="服务项目" prop="projectName" borderBottom
					@click="$u.route('/pages/project/list/list');">
					<u-input border="none" v-model="form.projectName" placeholder="请选择预约项目" disabledColor="#fff"
						disabled />
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="服务人员" prop="staffName" borderBottom @click="setStaff">
					<u-input border="none" v-model="form.staffName" placeholder="请选择" disabledColor="#fff" disabled />
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="预约备注" prop="remark" :borderBottom="form.projectId?true:false">
					<u-input border="none" v-model="form.remark" placeholder="请输入预约备注" />
				</u-form-item>
				<view class="" v-if="form.projectId">
					<u-tabs :list="dateList" lineColor="#303133" lineWidth="45" :itemStyle="{height: '54px'}"
						@change="onTabsChage">
						<view slot="right" style="padding-left: 4px;" @tap="isShowCalendar=true">
							<u-icon name="calendar" size="21" label="日期" labelPos="bottom" labelColor="#fa3534"
								color="#fa3534" bold></u-icon>
						</view>
					</u-tabs>
					<!-- 单选 -->
					<view class="tag-box" v-if="timeRadios.length > 0">
						<view class="tag-item" v-for="(item, index) in timeRadios" :key="item.num"
							:class="item.used?(item.onc?'tag-active2':'tag-active'):''" @click="radioClick(index)">
							{{item.time}}
						</view>
					</view>
					<view class="prompt" v-else>
						<text>暂无可预约时间点</text>
					</view>
				</view>
			</u--form>
		</view>
		<view class="ubtn">
			<u-button type="error" @click="submit" text="立即预约"></u-button>
		</view>
		<u-calendar :show="isShowCalendar" mode="single" color="#fa3534" :minDate="minDate"
			@close="isShowCalendar=false" @confirm="onConfirmDate">
		</u-calendar>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	const d = new Date()
	const year = d.getFullYear()
	let month = d.getMonth() + 1
	month = month < 10 ? `0${month}` : month
	const date = d.getDate()
	export default {
		data() {
			return {
				cIndex: 0,
				isShowCalendar: false,
				minDate: `${year}-${month}-${date}`,
				timeRadios: [],
				dateList: [],
				form: {
					projectName: '',
					appointmentSpan: '',
					projectId: null,
					staffName: '到店安排',
					storeId: 0,
					storeName: '',
					staffId: 0,
					remark: '',
					num: null,
					date: `${year}-${month}-${date}`,
				},
				rules: {
					storeName: [{
						required: true,
						message: '请选择预约项目',
						trigger: ['blur', 'change']
					}],
					projectName: [{
						required: true,
						message: '请选择服务项目',
						trigger: ['blur', 'change']
					}],
					num: [{
							required: true,
							message: '请选择预约时间',
							trigger: ['blur', 'change']
						},
						// {
						// 	// 自定义验证函数，见上说明
						// 	validator: (rule, value, callback) => {
						// 		return !uni.$u.test.isEmpty(value);
						// 	},
						// 	message: '请选择预约时间',
						// 	// 触发器可以同时用blur和change
						// 	trigger: ['change','blur'],
						// }
					]
				}
			}
		},
		onLoad(opt) {
			if(opt.storeId){
				this.form.storeName = opt.storeName
				this.form.storeId = opt.storeId
			}else {
				this.form.storeId = this.userStore.id
				this.form.storeName = this.userStore.name
			}
			// 监听事件  
			this.getAppointmentDays()
			uni.$on('project', obj => {
				this.form.projectId = obj.id
				this.form.projectName = obj.name
				this.getTimeList()
			})
			uni.$on('staff', obj => {
				this.form.staffName = obj.nickName
				this.form.staffId = obj.id
				this.getTimeList()
			})
			uni.$on('store', obj => {
				this.form.storeName = obj.storeName
				this.form.storeId = obj.storeId
				this.form.staffName = '到店安排'
				this.form.staffId = 0
			})
		},
		computed: { ...mapState(['userStore']), },
		onUnload() {
			// 移除监听事件  
			uni.$off('project')
			uni.$off('staff')
			uni.$off('store')
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules)
		},
		methods: {
			setStaff(){
				if(this.form.projectId){
					uni.$u.route('/pages/staff/list/list', {storeId:this.form.storeId})
				}else {
					this.$refs.uToast.show({
						message: '请先选择预约项目!'
					})
				}
			},
			getAppointmentDays(date) {
				this.$u.api.AppointmentDays({ date: date || '' }).then(res => {
					if (res.data.list.length > 0) {
						this.dateList = res.data.list.map(im => {
							return {
								name: im.week,
								date: im.day
							}
						})
					}

				})
			},
			getTimeList(date) {
				this.$u.api.TimeList({
					projectId: this.form.projectId,
					storeId: this.form.storeId,
					staffId: this.form.staffId,
					date: date || this.minDate
				}).then(res => {
					this.timeRadios = res.data.list.map(im => {
						if (im.used) {
							im.onc = true
						} else {
							im.onc = false
						}
						return im
					})
				})
			},
			// 预约提交
			submit() {
				const that = this
				this.$refs.uForm.validate().then(res => {
					if (!uni.$u.test.isEmpty(this.form.num)) {
						this.$u.api.ProjectDoCreateOrder({
							storeId: this.form.storeId,
							orderType: 11,
							realAmout: this.form.projectPrice,
							remark: this.form.remark,
							items:[{
								itemId:this.form.projectId,
								nums: 1,
								price: this.form.projectPrice,
								staffId: this.form.staffId,
								appointmentTime: this.form.date,
								appointmentSpan: this.form.appointmentSpan
							}]
						}).then(res=>{
							that.$refs.uToast.show({
								message: res.msg,
								complete() {
									uni.$u.route('/pages/payment/pay/pay?orderId=' + res.data + '&type=' + that.$globalConstVars.paymentType.projectOrder)
								}
							})
						})
						// this.$u.api.ProjectDoCreate({ ...this.form }).then(res => {
						// 	if (res.code === 0) {
						// 		this.$refs.uToast.show({
						// 			message: res.msg,
						// 			complete() {
						// 				uni.redirectTo({ url: '/pages/member/reservation/index' })
						// 			}
						// 		})
						// 	}
						// })
					} else {
						uni.$u.toast('请选择预约时段')
					}
				})
			},
			// 点击tabs事件
			onTabsChage(item) {
				if (this.cIndex !== item.index) {
					this.cIndex = item.index
					this.getTimeList(item.date)
					this.form.num = null
					this.form.date = item.date
				}
			},
			// 单选预约时间
			radioClick(ix) {
				if (this.timeRadios[ix].onc) return
				this.timeRadios.map((item, index) => {
					item.used = index === ix ? true : false
					if (item.onc) {
						item.used = true
					}
				})
				this.form.num = this.timeRadios[ix].num
				this.form.appointmentSpan = this.timeRadios[ix].time
			},
			// 选择时间
			onConfirmDate(e) {
				this.isShowCalendar = false
				this.getAppointmentDays(e[0])
				this.getTimeList(e[0])
				this.form.date = e[0]
				this.form.num = null
			},
		}
	}
</script>

<style lang="scss">
	.formbox {
		padding: 0 20rpx;
		background-color: #fff;
	}

	.ubtn {
		padding: 0 40rpx;
		margin-top: 40rpx;
	}

	.tag-box {
		display: flex;
		flex-wrap: wrap;
		margin-top: 20rpx;
		padding-top: 20rpx;
		border-top: 1px #d6d7d9 solid;

		// justify-content: space-around;
		.tag-item {
			border: 1px #d6d7d9 solid;
			text-align: center;
			// width: 160rpx;
			padding: 10rpx 10rpx;
			border-radius: 10rpx;
			margin-bottom: 20rpx;
			margin-right: 20rpx;
		}

		.tag-active {
			border-color: #fa3534;
			color: #fa3534;
		}

		.tag-active2 {
			background-color: #d6d7d9;
			color: #999;
		}
	}
	.prompt{
		text-align: center;
		padding: 50rpx;
		color: #d6d7d9;
		font-size: 26rpx;
	}
</style>
